// 实现这个项目的构建任务
const {
  src,
  dest,
  parallel,
  series,
  watch
} = require("gulp")
const loadPlugins = require('gulp-load-plugins');
const del = require('del');
const bs = require('browser-sync');


const plugins = loadPlugins();

let config = {
  build: {
    src: 'src',
    public: 'public',
    dist: 'dist',
    temp: 'temp',
    paths: {
      scripts: 'assets/scripts/*.js',
      styles: 'assets/styles/*.scss',
      pages: '*.html',
      images: 'assets/images/*',
      fonts: 'assets/fonts/*'
    }
  }
}


const data = {
  menus: [{
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Features',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [{
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date(),
  divname: 'haha',
};


const clean = () => {
    return del([config.build.dist, config.build.temp]);
}


const style = () => {
  return src(config.build.paths.styles, {
      base: config.build.src,
      cwd: config.build.src
    })
    .pipe(plugins.sass({
      outputStyle: 'expanded'
    }))
    .pipe(dest(config.build.temp))
    .pipe(bs.reload( {stream: true} ))
}

const script = () => {
  return src(config.build.paths.scripts, {
      base: config.build.src,
      cwd: config.build.src
    })
    .pipe(plugins.babel({
        presets: [require('@babel/preset-env')],
    }))
    .pipe(dest(config.build.temp))
    .pipe(bs.reload( {stream: true} ))

}

const page = () => {
  return src(config.build.paths.pages, {
      base: config.build.src,
      cwd: config.build.src
    })
    .pipe(plugins.swig({ data }))
    .pipe(dest(config.build.temp))
    .pipe(bs.reload( {stream: true }))
}

const images = () => {
    return src(config.build.paths.images, {
        base: config.build.src,
        cwd: config.build.src
      })
      .pipe(plugins.imagemin())
      .pipe(dest(config.build.dist))
}

const fonts = () => {
    return src(config.build.paths.fonts, {
        base: config.build.src,
        cwd: config.build.src
      })
      .pipe(plugins.imagemin())
      .pipe(dest(config.build.dist))
}

const extra = ()=>{
    return src(config.build.public, {
        base: config.build.src})
      .pipe(dest(config.build.dist));
}
 
const server = ()=>{
    watch(config.build.paths.styles, {cwd: config.build.src}, style),
    watch(config.build.paths.scripts, {cwd: config.build.src}, script),
    watch(config.build.paths.pages, {cwd: config.build.src}, page),
    watch([
        config.build.paths.images,
        config.build.paths.fonts,
    ],{cwd: config.build.src}, bs.reload({stream: true })),
    watch(config.build.public ,{cwd: config.build.src}, bs.reload({stream: true}))
    
    bs.init({
        server: {
            baseDir: [config.build.temp, config.build.src, config.build.public],
            routes: {
                '/node_modules':'node_modules',
            }
        }
    })
}


const useref = () => {
    return src(config.build.paths.pages,{ base:config.build.temp, cwd: config.build.temp})
    .pipe(plugins.useref({ searchPath: [ config.build.temp, '.' ]} ))
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
        collapseWhitespace: true,//  压缩空白字符和换行符
        // html的css，js的压缩
        minifyCSS: true,
        minifyJS: true,
    })))
    .pipe(dest(config.build.dist))

}




const compile = parallel(style, script, page);

const build = series(clean, parallel(series(compile, useref), images, fonts,extra));

const serve = series(clean,compile,server);

module.exports = {
    clean,
    serve,
    build,
}

/* 

  "clean": "gulp clean",
    "lint": "gulp lint",
    "serve": "gulp serve",
    "build": "gulp build",
    "start": "gulp start",
    "deploy": "gulp deploy --production"
*/
